// 1.	变量
$color:pink;
$font_size:20px;//变量用下划线隔开来和属性区分
.bl{
	width:100px;
	height:100px;
	background-color:$color;
	text-align:center;
	line-height:100px;
	font-size:$font_size;
	margin:{
		top:20px;
		right:auto;
		left:auto;
	}
}
// 2.	嵌套CSS规则
.content{
	width:200px;
	height:150px;
	margin:auto;
	.box1{
		p{color:$color;font-size:15px;}
		span{color:lightblue;font-size:20px;}
	}
	.box2{
		h1{color:lightgreen;}
	}
}
// 父选择器的标识符&
.ulist{
	width:120px;
	height:120px;
	margin:auto;
	ul{
		li{
			color:$color;
			list-style-type:none;
			text-align:center;
			&:hover{background-color:lightblue;color:white;}
		}
	}
}
// 群组选择器的嵌套
.container{
	width:200px;
	height:180px;
	margin:auto;
	h1{color:$color;}
	h2{color:lightblue;}
	h3{color:lightgreen;}
}
// 嵌套属性
.eleContainer{
	width:100px;
	height:100px;
	margin:auto;
	border:{
		width:5px;
		style:dashed;
		color:$color;
	}
	background:{
		color:lightblue;
		origin:border-box;
		image:url('../miao.jpg');
		size:100% 100%;
	}
}
// 混合器中的CSS规则
// @mixin btn{
// 	width:150px;
// 	height:50px;
// 	text-align:center;
// 	line-height:50px;
// 	font-size:$font_size;
// 	color:#333;
// 	font-weight:500;
// 	border:1px solid #ccc;
// 	border-radius:5px;
// 	margin:auto;
// }
// .btn{
// 	@include btn;
// 	&:hover{
// 		background-color:$color;
// 		color:white;
// 	}
// }
// 混合器传参
@mixin btn($W,$h,$lh){
	width:$W;
	height:$h;
	text-align:center;
	line-height:$lh;
	font-size:$font_size;
	color:#333;
	font-weight:500;
	border:1px solid #ccc;
	border-radius:5px;
	margin:auto;
}
.btn{
	@include btn(150px,50px,50px);
	&:hover{
		background-color:$color;
		color:white;
	}
}